<template>
	<view class="base-resource">
		<!-- <tn-nav-bar  backTitle="基地资源"></tn-nav-bar> -->
		<navSearchBar title="精彩案例" :hasSearch="true" :zIndex="titleZindex" @conFirmSearch="topSearch" ref="topSearchRef"></navSearchBar>
		<view style="height: 100rpx;">
			<view class="top-operate" :style="{zIndex:titleZindex-1}" @click="clickOperate">
				
					<text @click="openPop('SORT')" :class="[searchData['order'] !== ''?'active-style':'']">排序<text class="tn-icon-sort"></text></text>
					<text @click="openField" :class="[searchData['province_id'] !== ''?'active-style':'']">区域<text class="tn-icon-down-triangle"></text></text>
					<text @click="openIndusty" :class="[searchData['industry_id'] !== ''?'active-style':'']">行业<text class="tn-icon-down-triangle"></text></text>
					<text @click="openPop('PERSONNMUBER')" :class="[searchData['activity_total'] !== ''?'active-style':'']">人数<text class="tn-icon-down-triangle"></text></text>
					<text @click="openSelect" :class="[searchActive()?'active-style':'']"><text class="tn-icon-filter"></text>筛选</text>
			</view>
		</view>
		<scroll-view  class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="scrolltolower ">
				
				
				<view  class="body-field" >
					<imageCard v-for="(item,index) in baseList" :key="index" :data="item" @routeTo="routeTo" class="image-body"></imageCard>
				
				</view>
				<!-- <view class="mask" v-if="maskVisible"></view> -->
		</scroll-view>
		<tn-popup v-model="maskVisible" mode="top" :marginTop="popupMarginTop">
		  <view :class="[column==3?'popup-field-3':'popup-field-4']"  class="popup-field">
		  	<view :class="[column==3?'text-body-3':'text-body-4',activeHandle(item)?'active-style':'']" class="text-body" v-for="(item,index) in popupDisplayList" :key="index" @click="selectSearch(item)">
		  		<text>{{item.text}}</text>
		  	</view>
		  </view>
		</tn-popup>
		<tn-picker safeAreaInsetBottom mode="multiSelector" v-model="areaShow"  :range="areaData" rangeKey="title" :defaultSelector="initAreaData" @columnchange="areaColumnchange" @confirm="areaConfirm"></tn-picker>
		<tn-picker safeAreaInsetBottom mode="multiSelector" v-model="industyShow"  :range="industryData" rangeKey="title" :defaultSelector="initIndustyData" @columnchange="industyColumnchange" @confirm="industyConfirm"></tn-picker>
		
	</view>
</template>

<script>
	import imageCard from "../common/imageCard";
	import {rpxToPx} from "@/common/util/util"
	
	// import popup from "../../../components/uni-popup/uni-popup.vue";
	const SORT = 'SORT';
	const INDUSTY = 'INDUSTY';
	const PERSONNMUBER = 'PERSONNMUBER';
	export default {
		components:{
			imageCard,
			
			
		},
		data() {
			return {
				baseList:[],
				popupDisplayList:[],
				
				sortData:[{text:'默认排序',value:''},{text:'人数最多',value:1},{text:'人数最少',value:2},{text:'活动时间最早',value:3},{text:'活动时间最晚',value:4}],
				starLevelData:[],
				cooperationLevelData:[],
				industyShow:false,
				areaShow:false,
				maskVisible:false,
				titleZindex:100,
				column:3,
				popupMarginTop:90,
				searchData:{
					type:'',
					activity_time:'',
					industry_id:'',
					activity_total:'',
					order:'',
					// conference_total:'',
					// stay_total:'',
					// accommodate_total:'',
					// cooperation_level:'',
					// star_level:'',
					region_id:'',
					province_id:'',
					city_id:'',
					category_id:'',
					
				},
				areaData:[[{ title: "不限", id:""}],[{ title: "不限", id:""}],[{ title: "不限", id:""}]],
				industryData:[[{ title: "不限", id:""}],[{ title: "不限", id:""}]],
				areaText:'',
				initAreaData:[0,0,0],
				initIndustyData:[0,0],
				currentPage:1,
				pageSize:20,
				total:0,
			}
		},
		
		created(){
			//它比onload还先 销毁是unload先
			//不能访问this.$Route
			console.log('baseoncreated')
			
			
		},
		onLoad(e){
			console.log('baseonload',e,this.$Route.query)
			const px = Math.floor(rpxToPx(100));
			let height = this.$store.getters.my_custom_navBarHeight;
			this.popupMarginTop = height + px;
			
			// this.getList();
			this.getPersonNumber();
			this.getIndustyData(0);
			this.getAreaList(0);
		},
		onShow(e){
			console.log('base onShow',this.$Route,e)
			if(!this.detail_page_flag){//详情不刷新
				this.handleSearchByPage();
				if(!this.searchData.title){
					this.$refs.topSearchRef.setValue('');
				}
			}
			this.detail_page_flag = false;
			
		},
		onReachBottom(){
			console.log('onReachBottom')
			if(this.total > this.pageSize * this.currentPage){
				this.currentPage += 1;
				this.getList();
			}
		},
		methods: {
			clickOperate(){
				console.log('shexian')
				// this.maskVisible
			},
			handleSearchByPage(){
				this.currentPage = 1;
				this.baseList = [];
				this.getList();
			},
			searchActive(){
				console.log('meifanzying',this.searchData)
				let keys = Object.keys(this.searchData);
				for(let key of keys){
					if(this.searchData[key] !=='' &&key !== 'title'){
						return 'active-style';
					}
				}
				return '';
			},
			industyConfirm(data){
				let proviceData = this.industryData[0][data[0]];
				let cityData = this.industryData[1][data[1]];
				
				this.searchData['industry_id'] = proviceData.id;
				this.searchData['industry_detail_id'] = cityData.id;
				
				
				this.handleSearchByPage();
			},
			industyColumnchange({column, index}){
				let parentId = this.industryData[column][index].id;
				if(column < 1){
					this.getIndustyData(parentId, column+1);
				}
				this.$set(this.initIndustyData,column,index);
			},
			areaConfirm(data){
				console.log('datatatata',data,this.searchData)
				let proviceData = this.areaData[0][data[0]];
				let cityData = this.areaData[1][data[1]];
				let regionData = this.areaData[2][data[2]];
				this.searchData['province_id'] = proviceData.id;
				this.searchData['city_id'] = cityData.id;
				this.searchData['region_id'] = regionData.id;
				if(this.searchData['province_id'] !== ''){
					this.areaText = proviceData.title;
				}
				if(this.searchData['city_id'] !== ''){
					this.areaText += '/'+ cityData.title;
				}
				if(this.searchData['region_id'] !== ''){
					this.areaText += '/'+ regionData.title;
				}
				this.searchData['areaText'] = this.areaText;
				this.handleSearchByPage();
			},
			areaColumnchange({column, index}){
				console.log('column',column,index);
				let parentId = this.areaData[column][index].id;
				if(column < 2){
					this.getAreaList(parentId, column+1);
				}
				this.$set(this.initAreaData,column,index);
			},
			
			getAreaList(parentId,column=0){
				this.$http.get('/api/common/area/select',{parent_id:parentId}).then((res) => {
					if(res.data.status == 200) {
						let data = res.data.data||[];
						data.unshift({ title: "不限", id:''});
						this.$set(this.areaData,column,data)
						console.log('ccccccccc',this.areaData)
						
					} else {
						
					}
					
				})
			},
			getIndustyData(parentId,column=0){
				this.$http.get('/api/industry/select',{parent_id:parentId}).then((res) => {
					if(res.data.status == 200) {
						let data = res.data.data||[];
						data.unshift({ title: "不限", id:''});
						this.$set(this.industryData,column,data)
						console.log('ccccccccc',this.industryData)
						
					} else {
						
					}
					
				})
			},
			getPersonNumber(){
				this.$http.get('/api/dictionary/data',{title:'people_level'}).then((res) => {
					
					if(res.data.status == 200) {
						console.log('star_level', res.data.data)
						this.starLevelData = res.data.data || [];
						this.starLevelData.unshift({text:'不限',value:''});
					}else{
						
					}
				})
			},
			getCooperationLevel(){
				this.$http.get('/api/dictionary/data',{title:'cooperation_level'}).then((res) => {
					
					if(res.data.status == 200) {
						console.log('cooperation_level', res.data.data)
						this.cooperationLevelData = res.data.data || [];
						this.cooperationLevelData.unshift({text:'不限',value:''});
					}else{
						
					}
				})
			},
			getList(){
				this.$tip.loading();
				const reqData = {
					...this.searchData,
					page:this.currentPage,
					limit:this.pageSize,
				}
				this.$http.get('/api/business/example/list',reqData).then((res) => {
					console.log('fffffffffff', res)
					this.$tip.loaded();
					if(res.data.status == 200) {
						console.log('fffffffffff', res.data.data)
						let list = res.data.data.data || [];
						this.baseList = this.baseList.concat(list);
						this.currentPage = res.data.data.current_page||1;
						this.pageSize =  res.data.data.per_page||20;
						this.total = res.data.data.total||0;
					}else{
						
					}
				})
			},
			routeTo(item) {
				this.$Router.push({name:'sampleDetail',query:{id:item.id}})
			},
			scrolltolower(){
				console.log('scrolltolower',e)
			},
			
			openPop(type){
				this.closeDialog();
				
				this.maskVisible = true;
				this.titleZindex = 29999;
				let list = [];
				this.type = type;
				if(this.type == SORT){
					list = this.sortData;
					this.column = 3;
				} else if (this.type == PERSONNMUBER) {
					list = this.starLevelData;
					this.column = 3;
				} else {
					// list = this.cooperationLevelData;
					// this.column = 4;
				}
				console.log('wwwwwww',list,type)
				this.popupDisplayList = list;
				// this.$refs.popupRef.open();
			},
			openField(){
				this.closeDialog();
				this.areaShow = true;
			},
			openIndusty(){
				this.closeDialog();
				this.industyShow = true;
			},
			closeDialog(){
				this.maskVisible = false;
				this.titleZindex = 100;
				this.areaShow = false;
				this.industyShow = false;
			},
			openSelect(){
				this.closeDialog();
				this.$Router.push({name:'sampleScreen',query:{
					personNumberData:this.starLevelData,
					sortData:this.sortData,
					
					searchData:this.searchData,
					
					
				}});
			},
			activeHandle(item){
				if(this.type == SORT) {
					return item.value == this.searchData['order']
				} else if (this.type == PERSONNMUBER) {
					return item.value == this.searchData['activity_total']
				} else {
					// return item.value == this.searchData['cooperation_level']
				}
			},
			selectSearch(item){
				this.maskVisible = false;
				if(this.type == SORT) {
					this.searchData['order'] = item.value;
				} else if (this.type == PERSONNMUBER) {
					this.searchData['activity_total'] = item.value;
					
				} else {
					// this.searchData['cooperation_level'] = item.value;
				}
				this.handleSearchByPage();
				
			},
			topSearch(value){
				console.log('1111111111',value)
				this.searchData['title'] = value;
				this.handleSearchByPage();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.base-resource{
		height: 100%;
		.custom-tabbar-page {
			// height: calc(100vh - (134rpx + 88rpx + env(safe-area-inset-bottom) / 2));
			
		
	}
	.top-operate{
		padding-top:10rpx;
		height: 100rpx;
		width: 100%;
		display: flex;
		position: fixed;
		background-color: #fff;
		border-bottom: 2rpx solid #EFEFEF;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text{
			color:#6F6F6F;
		}
		[class*='tn-icon-']{
			color:#D9D9D9;
		}
		.tn-icon-filter{
			color: #757575;
		}
		.active-style{
			color: #EE8731;
			[class*='tn-icon-']{
				color: #EE8731;
			}
		}
	}
	
	.body-field{
		
		padding:30rpx;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 30rpx;
	
		.image-body{
			
			
			
			
		}
		
	}
	.popup-field-4{
		grid-template-columns:1fr 1fr 1fr 1fr;
	}
	.popup-field-3{
		
		grid-template-columns:1fr 1fr 1fr;
		
	}
	.popup-field{
		
		padding: 28rpx 28rpx 30rpx 30rpx;
		display: grid;
		// justify-content: space-between;
		// flex-wrap: wrap;
		
		grid-column-gap: 20rpx;
		grid-row-gap: 20rpx;
		.text-body{
			text-align: center;
			line-height: 72rpx;
			font-size: 24rpx;
			color:#6F6F6F;
			background-color: #F7F8FC;
			border-radius: 10rpx;
		}
		.text-body-3{
			
			width: 220rpx;
			height: 72rpx;
			
		}
		.text-body-4{
			
			width: 160rpx;
			height: 72rpx;
			
		}
		.active-style{
			border: 2rpx solid #FFA457;
			background-color: #FDF1E5;
			color: #EE8731;
		}
	}
}

</style>
